<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/node.css" />

		<style>
			html,
			body {
				background-color: #FFFFFF;
			}
			
			.mui-off-canvas-right {
				color: #fff;
			}
			
			.txt {
				font-size: 16px;
				border: 1px solid;
				border-radius: 5px;
				color: #007AFF;
				line-height: 120%;
				padding: 2px;
				margin: 5px;
			}
			
			textarea,
			input {
				color: #000000;
			}
		</style>
		<style type="text/css">
			.mui-preview-image.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			
			.mui-preview-loading.mui-active {
				display: block;
			}
			
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			
			p img {
				max-width: 100%;
				height: auto;
			}
		</style>

	</head>

	<body>

		<div class="mui-inner-wrap">
			<header class="mui-bar mui-bar-nav">
				<div align="center" style="padding-top: 10px;">
					<img onclick="show(1)" src="../icon/sportsIcon.png" width="30%" style="margin: 0px 20px 0px 20px;" />
					<img onclick="show(2)" src="../icon/actionIcon.png" width="30%" style="margin: 0px 20px 0px 20px;" />
				</div>
			</header>

			<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper ">
				<div class="mui-scroll">
					<div id="list">
						<div id="item" style="padding: 10px;border-bottom: 1px solid;border-color: #B5B5B5;background-color: #ffffff;">
							<div>
								<img id="icon" src="../images/001/icon.jpg " width="60px" height="60px" align="left" style="margin-right: 10px;" />
								<div style="float: right;" id="icons">
									<img src="../icon/circle/1.png" width="25px" style="display: none;" />
									<img src="../icon/circle/2.png" width="25px" style="display: none;" />
									<img src="../icon/circle/3.png" width="25px" style="display: none;" />
									<img src="../icon/circle/4.png" width="25px" style="display: none;" />
									<img src="../icon/circle/7.png" width="25px" style="display: none;" />
									<img src="../icon/circle/8.png" width="25px" style="display: inline;" />
								</div>
								<div>
									<p id="nickname">篮球火火 </p>
									<p id="title">标题：无兄弟不篮球</p>
								</div>
							</div>
							<div id="" style="min-height: 60px;">
								<img onclick="showMaps();" src="../icon/minMap.png" width="60px" height="60px" align="right" style="margin-right: 10px;" />
								<p id="msg">每月一度的以球会友杯圆满收官啦，各位老友下个月再见！！</p>
							</div>
							<div>
								<img id="img0" src="../images/001/icon/A1.jpg " width="32%" data-preview-src="" data-preview-group="0" />
								<img id="img1" src="../images/001/icon/B-1.jpg " width="32%" data-preview-src="" data-preview-group="0" />
								<img id="img2" src="../images/001/icon/C-1.jpg " width="32%" data-preview-src="" data-preview-group="0" />
								<img id="img3" src="../images/001/icon/A1.jpg " width="32%" data-preview-src="" data-preview-group="0" />
								<img id="img4" src="../images/001/icon/B-1.jpg " width="32%" data-preview-src="" data-preview-group="0" />
								<img id="img5" src="../images/001/icon/C-1.jpg " width="32%" data-preview-src="" data-preview-group="0" />
								<img id="img6" src="../images/001/icon/A1.jpg " width="32%" data-preview-src="" data-preview-group="0" />
								<img id="img7" src="../images/001/icon/B-1.jpg " width="32%" data-preview-src="" data-preview-group="0" />
								<img id="img8" src="../images/001/icon/C-1.jpg " width="32%" data-preview-src="" data-preview-group="0" />
							</div>

							<div id="comment" style="padding: 10px ;background-color: #EBEBEB;">
								<div>留言：
									<a id="aa" class="mui-pull-right">更多</a>
								</div>
							</div>

						</div>
					</div>
				</div>

			</div>

			<script src="../js/mui.min.js"></script>
			<script src="../json/data2.js"></script>
			<script src="../js/mui.zoom.js"></script>
			<script src="../js/mui.previewimage.js"></script>
			<script>
				var mask = mui.createMask(_closeMenu);
				var curIndex = -1;

				mui.init({
					swipeBack: false,
					preloadPages: [{
							id: 'offCanvas_1.html',
							url: 'offCanvas_1.html',
							styles: {
								left: "100%",
								width: '70%',
								top: 0,
								bottom: 51,
								zindex: 9997

							}
						},
						{
							id: 'offCanvas_2.html',
							url: 'offCanvas_2.html',
							styles: {
								left: "100%",
								width: '70%',
								top: 0,
								bottom: 51,
								zindex: 9997,

							}
						}
					]
				});

				function showMaps() {
					if('Android' === plus.os.name && navigator.userAgent.indexOf('StreamApp') > 0) {
						plus.nativeUI.toast('当前环境暂不支持地图插件');
						return;
					}
					var ws = plus.webview.currentWebview();
					var wm = plus.webview.getWebviewById(plus.runtime.appid);
					wm && wm.evalJS("preateClear()");
					mui.openWindow("map/maps_map.html", "map");
				}

				function show(index) {
					if(index != curIndex) {
						var page = plus.webview.getWebviewById(index == 1 ? "offCanvas_1.html" : "offCanvas_2.html");
						//侧滑菜单处于隐藏状态，则立即显示出来；
						//显示完毕后，根据不同动画效果移动窗体；
						page.show('none', 0, function() {
							page.setStyle({
								left: '30%',
								transition: {
									duration: 150
								}
							});
						});
						//显示遮罩
						mask.show();
						curIndex = index;
					}
				}

				function _closeMenu() {
					if(curIndex >= 0) {
						var page = plus.webview.getWebviewById(curIndex == 1 ? "offCanvas_1.html" : "offCanvas_2.html");
						//主窗体开始侧滑；
						page.setStyle({
							left: '100%',
							transition: {
								duration: 150
							}
						});

						//等窗体动画结束后，隐藏菜单webview，节省资源；
						setTimeout(function() {
							page.hide();
						}, 200);
						curIndex = -1;
					}
				}
				/**
				 * 关闭侧滑菜单
				 */
				function closeMenu(closeMask) {
					_closeMenu();
					mask.close();
				}

				var page = null;

				window.addEventListener("menuClose", closeMenu);
				window.addEventListener("hide", closeMenu);

				mui('#offCanvasContentScroll').scroll();

				var list = document.getElementById("list");
				var item = document.getElementById("item");
				item.style.display = 'none';

				for(var j = 0; j < data2.length; j++) {
					var o = data2[j];
					var div = item.cloneNode(true)
					var icon = div.querySelector("#icon");
					var nickname = div.querySelector("#nickname");
					var title = div.querySelector("#title");
					var msg = div.querySelector("#msg");
					var comment = div.querySelector("#comment");
					var imgs = o.img;
					for(var i = 0; i < 9; i++) {
						var img = div.querySelector("#img" + i);
						if(imgs[i]) {
							img.src = imgs[i];
							img.setAttribute("data-preview-group", o.id);
						} else {
							img.remove();
						}
					}
					var rows = 3;
					for(var i = 0; i < o.comment.length; i++) {
						var p = document.createElement("p");
						p.style.lineHeight = "90%";
						p.style.fontSize = "12px;"
						if(i >= rows) {
							p.style.display = "none";
						}
						p.textContent = o.comment[i];
						comment.appendChild(p);
					}
					msg.textContent = o.msg;
					icon.src = o.iconSrc;
					nickname.textContent = o.nickname;
					title.textContent = "标题：" + o.title;
					div.style.display = 'inherit';
					var aa = div.querySelector("#aa");
					aa.addEventListener("tap", function() {
						var nodes = this.parentNode.parentNode.querySelectorAll("p");
						for(var i = rows + 1; i < nodes.length; i++) {
							nodes[i].style.display = nodes[i].style.display == "none" ? "inherit" : "none";
						}
					});

					var icons = div.querySelector("#icons").querySelectorAll("img");
					icons[4].addEventListener("tap", function() {
						var nodes = this.parentNode.querySelectorAll("img");
						for(var i = 0; i < nodes.length; i++) {
							nodes[i].style.display = (i == 5 ? "inline" : "none");
						}
					});
					icons[5].addEventListener("tap", function() {
						var nodes = this.parentNode.querySelectorAll("img");
						for(var i = 0; i < nodes.length; i++) {
							nodes[i].style.display = (i == 5 ? "none" : "inline");
						}
					});

					list.appendChild(div);
				}

				var opener = null;
				mui.previewImage(function(img) {
					plus.webview.currentWebview().setStyle({
						top: '0px',
						bottom: '0px'
					});
					if(!opener) opener = plus.webview.currentWebview().opener();
					mui.fire(opener, "hideTabBar");
				}, function(img) {
					plus.webview.currentWebview().setStyle({
						top: '0px',
						bottom: '51px'
					});
					if(!opener) opener = plus.webview.currentWebview().opener();
					mui.fire(opener, "showTabBar");
				});
			</script>
	</body>

</html>